"use client"
import { usePathname } from 'next/navigation';
import Link from 'next/link';
import "./styles.css"

const navLinks = [
    { href: '/register', label: 'Register' },
    { href: '/login', label: 'Login' },
];

export default function AuthLayout({
    children,
}: {
    children: React.ReactNode
}) {
    const pathname = usePathname();

    return (
        <html lang="en">
            <body>
                <div className='p-2'>
                    {
                        navLinks.map(link => {
                            const isActive = pathname === link.href || (pathname.startsWith(link.href) && link.href !== '/')
                            return (
                                <Link className={isActive ? "font-bold mr-4" : "text-blue-500 mr-4"} href={link.href} key={link.label}>{link.label}</Link>
                            )
                        })
                    }
                </div>
                <main>{children}</main>
                <footer style={{ backgroundColor: 'lightgreen', padding: '1rem' }}>
                    <p>Footer</p>
                </footer>
            </body>
        </html>
    )
}
